<template>
  <div v-if="loading">正在加载...</div>
  <div v-else-if="error">加载失败: {{ error }}</div>
  <div v-else-if="novel" class="novel-detail-container">
    <h1>{{ novel.novel_name }}</h1>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="作者ID">{{ novel.author_id }}</el-descriptions-item>
      <el-descriptions-item label="分类">{{ novel.category }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ novel.status }}</el-descriptions-item>
      <el-descriptions-item label="总章节">{{ novel.chapter_count }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <h2>简介</h2>
    <p>{{ novel.review || '暂无简介' }}</p>
    <el-divider />
    <h2>内容</h2>
    <div class="novel-content" v-html="novel.content"></div>
    <el-divider />

    <div class="actions">
      <el-button type="primary" @click="showReviewDialog = true">写书评</el-button>
    </div>

    <h2>书评</h2>
    <div v-if="commentsLoading">正在加载书评...</div>

    <div v-else-if="comments && comments.length">
      <el-card v-for="comment in comments" :key="comment.comment_id" class="comment-card">
        <p>{{ comment.content }}</p>
        <div class="comment-footer">
          <span>用户ID: {{ comment.reader_id }}</span>
          <span>{{ new Date(comment.createdAt).toLocaleString() }}</span>
        </div>
      </el-card>
    </div>
    <div v-else>暂无书评，快来抢沙发吧！</div>

    <el-dialog v-model="showReviewDialog" title="写书评">
      <el-form :model="reviewForm">
        <el-form-item>
          <el-input
            v-model="reviewForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入你的评论"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showReviewDialog = false">取消</el-button>
        <el-button type="primary" @click="submitReview">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const route = useRoute()
const novel = ref(null)
const loading = ref(false)
const error = ref(null)

const comments = ref([])
const commentsLoading = ref(false)
const commentsError = ref(null)

const showReviewDialog = ref(false)
const reviewForm = reactive({
  content: ''
})

const novelId = route.params.id

const fetchNovelDetail = async () => {
  loading.value = true
  error.value = null
  try {
    novel.value = await request.get(`/public/novels/${novelId}`)
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false
  }
}

const fetchComments = async () => {
  commentsLoading.value = true
  commentsError.value = null
  try {
    // 假设返回的数据结构是 { content: [...] }
    const response = await request.get(`/public/comments?novelId=${novelId}`)
    comments.value = response.content
  } catch (err) {
    commentsError.value = err
  } finally {
    commentsLoading.value = false
  }
}

const submitReview = async () => {
  if (!reviewForm.content.trim()) {
    ElMessage.warning('评论内容不能为空')
    return
  }
  try {
    await request.post(`/reader/novels/${novelId}/comments`, {
      content: reviewForm.content
    })
    ElMessage.success('评论成功')
    showReviewDialog.value = false
    reviewForm.content = ''
    fetchComments() // 重新加载评论
  } catch (err) {
    ElMessage.error('评论失败')
  }
}

onMounted(() => {
  fetchNovelDetail()
  fetchComments()
})
</script>

<style scoped>
.novel-detail-container {
  padding: 20px;
}
.actions {
  margin-top: 20px;
  margin-bottom: 20px;
}
.comment-card {
  margin-bottom: 15px;
}
.comment-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
</style>